import React, { PureComponent } from 'react';
import { Row, Col, Icon, Button } from 'antd';
import styles from './index.less';
import { connect } from 'dva';
import {
    STYLE,
    PRODUCT_LAYOUT,
    PRODUCT_LIMIT,
    PRODUCT_ENTRY_UUID_KEY,
    PRODUCT_DND_TYPE
} from './constants';

export default class ProductPreview extends PureComponent {
    render() {
        const { value } = this.props;

        return (
            <div className="rc-design-component-notice-preview GoodsModule">

                {
                   value.list && value.list.length > 0 ? value.productLayout == PRODUCT_LAYOUT.TWO ?
                        //一行两个
                        <Row className={styles.TwoaRow}>
                            {
                                value.list && value.list.map((item) => {
                                    return <Col span={12} key={item.Id}>
                                        <div className='pic'>
                                            <img src={`${window.cdnUrl}/${item.ImgUrl}`} style={{ height: 146 }} />
                                        </div>
                                        <p className='xkd-text-ellipsis-2'>{value.showOpts.filter(item => item === 1).length > 0 ? item.Name : ''}</p>
                                        {value.showOpts.filter(item => item === 2).length > 0 ? <span className='xkd-text-ellipsis'>{item.Feature} </span> : null}
                                        <ul>
                                            <li>
                                                {value.showOpts.filter(item => item === 3).length > 0 ? <em>￥</em> : null}
                                                {value.showOpts.filter(item => item === 3).length > 0 ? item.SalePrice : ''}
                                            </li>
                                            <li>
                                                {

                                                    value.showOpts.filter(item => item === 4).length > 0 ? value.style == STYLE.ONE ?
                                                        <Icon type="plus-circle" theme='twoTone' twoToneColor='#F5222D' style={{ fontSize: 23 }} />
                                                        : value.style == STYLE.TWO ? <img
                                                            src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png`}
                                                            width={24}
                                                            height={24}
                                                        /> : value.style == STYLE.THREE ? <img
                                                            src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png`}
                                                            width={24}
                                                            height={24}
                                                        /> : value.style == STYLE.FOUR ? <Button>BUY</Button> : null :
                                                        null
                                                }

                                            </li>
                                        </ul>
                                    </Col>
                                })
                            }
                        </Row> : value.productLayout == PRODUCT_LAYOUT.THREE ?
                            //一行三个
                            <Row className={styles.ThreeaRow} gutter={6}>
                                {
                                    value.list && value.list.map((item) => {

                                        return <Col span={8} key={item.Id}>
                                            <div className='pic'>  <img src={`${window.cdnUrl}/${item.ImgUrl}`} style={{ height: 96 }} /></div>
                                            <p className='xkd-text-ellipsis-2'>{value.showOpts.filter(item => item === 1).length > 0 ? item.Name : ''}</p>
                                            {value.showOpts.filter(item => item === 2).length > 0 ? <span className='xkd-text-ellipsis'>{item.Feature} </span>: null}
                                            <ul>
                                                <li>
                                                    {value.showOpts.filter(item => item === 3).length > 0 ? <em>￥</em> : null}
                                                    {value.showOpts.filter(item => item === 3).length > 0 ? item.SalePrice : ''}
                                                </li>
                                                <li>
                                                    {
                                                        value.showOpts.filter(item => item === 4).length > 0 ? value.style == STYLE.ONE ?
                                                            <Icon type="plus-circle" theme='twoTone' twoToneColor='#F5222D' style={{ fontSize: 23 }} />
                                                            : value.style == STYLE.TWO ? <img
                                                                src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png`}
                                                                width={24}
                                                                height={24}
                                                            /> : value.style == STYLE.THREE ? <img
                                                                src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png`}
                                                                width={24}
                                                                height={24}
                                                            /> : value.style == STYLE.FOUR ? <Button>BUY</Button> : null :
                                                            null
                                                    }
                                                </li>
                                            </ul>
                                        </Col>
                                    })
                                }
                            </Row> : value.productLayout == PRODUCT_LAYOUT.VERTICAL ?
                                value.list && value.list.map((item) => {
                                    return <Row className={styles.VerticalaRow} key={item.Id}>
                                        <Col span={6}>
                                            <div className='pic'><img src={`${window.cdnUrl}/${item.ImgUrl}`} style={{ height: 96 }} /></div>
                                        </Col>
                                        <Col span={18}>
                                            <div className="GoodsInfo">
                                                <p className='xkd-text-ellipsis-2'>{value.showOpts.filter(item => item === 1).length > 0 ? item.Name : ''}</p>
                                                {value.showOpts.filter(item => item === 2).length > 0 ? <span className='xkd-text-ellipsis'>{item.Feature} </span>: null}
                                            </div>
                                            <ul>
                                                <li>
                                                    {value.showOpts.filter(item => item === 3).length > 0 ? <em>￥</em> : null}
                                                    {value.showOpts.filter(item => item === 3).length > 0 ? item.SalePrice : ''}
                                                </li>
                                                <li>
                                                    {
                                                        value.showOpts.filter(item => item === 4).length > 0 ? value.style == STYLE.ONE ?
                                                            <Icon type="plus-circle" theme='twoTone' twoToneColor='#F5222D' style={{ fontSize: 23 }} />
                                                            : value.style == STYLE.TWO ? <img
                                                                src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png`}
                                                                width={24}
                                                                height={24}
                                                            /> : value.style == STYLE.THREE ? <img
                                                                src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png`}
                                                                width={24}
                                                                height={24}
                                                            /> : value.style == STYLE.FOUR ? <Button>BUY</Button> : null :
                                                            null
                                                    }
                                                </li>
                                            </ul>
                                        </Col>
                                    </Row>
                                }) : value.productLayout == PRODUCT_LAYOUT.ONE ?
                                    value.list && value.list.map((item) => {
                                        return <Row className={styles.OneaRow} key={item.Id}>
                                            <Col>
                                                <div className='pic'><img src={`${window.cdnUrl}/${item.ImgUrl}`} style={{ height: 298 }} /></div>
                                                <p className='xkd-text-ellipsis-2'>{value.showOpts.filter(item => item === 1).length > 0 ? item.Name : ''}</p>
                                                {value.showOpts.filter(item => item === 2).length > 0 ? <span className='xkd-text-ellipsis'>{item.Feature} </span>: null}
                                                <ul>
                                                    <li>
                                                        {value.showOpts.filter(item => item === 3).length > 0 ? <em>￥</em> : null}
                                                        {value.showOpts.filter(item => item === 3).length > 0 ? item.SalePrice : ''}
                                                    </li>
                                                    <li>
                                                        {
                                                            value.showOpts.filter(item => item === 4).length > 0 ? value.style == STYLE.ONE ?
                                                                <Icon type="plus-circle" theme='twoTone' twoToneColor='#F5222D' style={{ fontSize: 23 }} />
                                                                : value.style == STYLE.TWO ? <img
                                                                    src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png`}
                                                                    width={24}
                                                                    height={24}
                                                                /> : value.style == STYLE.THREE ? <img
                                                                    src={`${window.cdnUrl}/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png`}
                                                                    width={24}
                                                                    height={24}
                                                                /> : value.style == STYLE.FOUR ? <Button>BUY</Button> : null :
                                                                null
                                                        }
                                                    </li>
                                                </ul>
                                            </Col>

                                        </Row>
                                    }) : null :
                        <div className='GoodsFloor'>点击添加商品</div>

                }
            </div>
        );
    }
}
